<style>
    .cover-wraper{
        width: 100%;
        height: 100%;
        display: none;
        z-index: 10000;
        background: rgba(0,0,0,.8);
        position: fixed;
        left: 0;
        top: 0;
    }
    .cover-wraper .main{
        width: 278px;
        height: 383px;
        position: relative;
    }
    .cover-wraper .main .redpaper{
        width: 100%;
        height: 100%;
        position: absolute;
        background: url("/assets/base/index/images/redpaper.png");
        background-size: auto 100%;
        animation: active 0.4s steps(6) infinite;
    }
    .cover-wraper .close{
        width: 30px;
        height: 30px;
	    z-index: 100;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .cover-wraper .close img{
        width: 100%;
        height: 100%;
    }
    .flex-box{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
    }
    @-webkit-keyframes active {
        0% {background-position-x: -0px}
        100% {background-position-x: -1668px}
    }
</style>
<if condition="$show eq 1">
	<div class="cover-wraper flex-box">
		<div class="main">
			<a href="javascript:void(0);" class="close"><img src="/assets/base/index/images/close.png"/></a>
			<a href="{BEESCRM:$url}" target="_self" class="redpaper"></a>
		</div>
	</div>
</if>

<script src="/assets/base/water/js/jquery-2.1.0.min.js"></script>
<script>
	$(function(){
		$('.close').click(function(){
			$('.cover-wraper').removeClass('flex-box');
		});
	});
</script>